<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content" style="text-align:center;">

				<u-row customStyle="margin-bottom: 20px">

				</u-row>

				<u-row customStyle="margin-bottom: 5%;margin-left: 12%">

					<u-col span="5" @click="show = true">
						<u--image :src="imgSrc" shape="circle" :fade="true" duration="1000" width="85px" height="85px">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</u-col>
					<u-col span="7">
						<u--text text="欢迎,"></u--text>
						<u--text :text="account" type="primary" size=24></u--text>
						<!-- <span style="color:#00aaff;font-size: 25px; ">{{account}}</span> -->
						<u-tag :text="text" :type="type" plain size="mini" class="info"></u-tag>
					</u-col>


				</u-row>


				<u-row customStyle="margin-bottom: 10%" justify="center" disabled>
					<u-col span="4" justify="between" textAlign="center" url="">
						<u-icon name="home" size="35" class="icon"></u-icon>
						<u--text text="我的房屋" type="info" align="center" size=13></u--text>
					</u-col>
					<u-col span="4" justify="between" textAlign="center" url="">
						<u-icon name="car" size="35" class="icon"></u-icon>
						<u--text text="我的车辆" type="info" align="center" size=13></u--text>
					</u-col>
					<u-col span="4" justify="between" textAlign="center" url="">
						<u-icon name="map" size="35" class="icon"></u-icon>
						<u--text text="我的车位" type="info" align="center" size=13></u--text>
					</u-col>
				</u-row>



				<u-gap height="8" bgColor="#e8e8e8"></u-gap>

				<u-row customStyle="margin-left: 5%;margin-right: 5%">
					<u-col span="12">
						<u-cell-group>
							<u-cell url="" title="我要报修" :isLink="true" arrow-direction="right"
								@click="onPageto('/pages/repairs/repairs')" :disabled="isshow">
								<u-icon slot="icon" size="24" name="phone-fill" color="#ff8c5e"></u-icon>
							</u-cell>
							<u-cell url="/pages/payment/paymentrecords" title="我要缴费" :isLink="true"
								arrow-direction="right" :disabled="isshow">
								<u-icon slot="icon" size="24" name="rmb-circle-fill" color="#ff8c5e"></u-icon>
							</u-cell>
							<u-cell url="/pages/my/realname" title="我要认证" :isLink="true" arrow-direction="right" v-if="status != 'y'">
								<u-icon slot="icon" size="24" name="account-fill" color="#ff8c5e"></u-icon>
							</u-cell>
						</u-cell-group>
					</u-col>
				</u-row>

				<u-gap height="8" bgColor="#e8e8e8"></u-gap>

				<u-row customStyle="margin-left: 5%;margin-right: 5%">
					<u-col span="12">
						<u-cell-group>
							<u-cell url="/pages/my/updateinfo" icon="edit-pen" title="修改信息" :isLink="true"
								arrow-direction="right" :disabled="isshow">
								<u-icon slot="icon" size="24" name="edit-pen-fill"></u-icon>
							</u-cell>
							<u-cell url="" icon="file-text" title="报修记录" :isLink="true" arrow-direction="right"
								@click="onPageto('/pages/repairs/repairsRecord')" :disabled="isshow">
								<u-icon slot="icon" size="24" name="file-text-fill"></u-icon>
							</u-cell>
							<u-cell url="" icon="kefu-ermai" title="联系我们" :isLink="true" arrow-direction="right"
								@click="showMaintenance = true">
								<u-icon slot="icon" size="24" name="kefu-ermai"></u-icon>
							</u-cell>
						</u-cell-group>
					</u-col>
				</u-row>



			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view style="height: 200px;width: 200px;text-align: center;">
				<u--text text="修改头像:" size=17></u--text>
				<view style="margin-left: 25px;margin-top: 10px;">
					<u-upload width="150" height="150" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
						name="1" :maxCount="1"></u-upload>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showMaintenance" @close="showMaintenance = false">
			<view style="height: 200px;margin: 15px;">
				<uni-section title="联系人" type="line" titleFontSize="20px">
					<u--text size="30" :call="true" mode="phone" text="热心市民"></u--text>
				</uni-section>
				<uni-section title="联系方式" type="line" titleFontSize="20px">
					<u--text size="30" :call="true" mode="phone" text="110"></u--text>
					<text style="margin-left:10px;color: blue">点击拨打电话</text>
				</uni-section>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMaintenance: false,
				text: '未认证',
				type: 'warning',
				isshow: true,
				fileList1: [],
				show: false,
				imgSrc: '',
				account: 'account',
				status: '',
			};
		},
		methods: {
			onPageto(url) {
				uni.navigateTo({
					url: url
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let j = uni.getStorageSync("jwt");
					let a = uni.uploadFile({
						url: 'http://localhost:8080/api/v1/yz/photo', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							jwt: j,
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
								uni.$u.toast('修改头像成功！');
								this.$axios.get("/yz/getphoto/1", {
									responseType: "blob"
								}).then(res => {
									let blob = new window.Blob([res.data]);
									let url = window.URL.createObjectURL(blob);
									this.imgSrc = url;
									console.log(res)
								});
							}, 1000)

						}
					});
				})
			},
		},
		created() {
			this.$axios.get("/yz/getphoto/1", {
				responseType: "blob"
			}).then(res => {
				let blob = new window.Blob([res.data]);
				let url = window.URL.createObjectURL(blob);
				this.imgSrc = url;
				console.log(res)
			});


			this.$axios.get("/yz/roominfo").then(res => {
				this.account = res.data.data.account;
				this.status = res.data.data.status;
				if (this.status == 'y') {
					this.isshow = false;
					this.text = '已认证';
					this.type = 'success';
				} else if (this.status == 's') {
					this.text = '待审核';
					this.type = 'primary';
				}
			});

			// let that = this;
			// let j = uni.getStorageSync("jwt");
			// uni.request({
			// 	url: 'http://localhost:8080/api/v1/yz/getphoto/1',

			// 	header:{
			// 		jwt: j,
			// 	},
			// 	responseType:ArrayBuffer,
			// 	success: function(res) {
			// 		let blob = new window.Blob([res.data]);
			// 		let url = window.URL.createObjectURL(blob);
			// 		that.imgSrc = url;
			// 		console.log(res)
			// 	}
			// });
		}
	}
</script>

<style lang="scss">
	.icon {
		flex-direction: column;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.info {
		flex-direction: row;
	}
</style>
